// @ts-nocheck
import React from 'react';
import { history } from 'umi';
import { FloatingBall } from 'react-vant';
import { Edit } from '@react-vant/icons';
import { Toast } from 'antd-mobile';
import '@/pages/golobo.less';
import one from './img/0.png';
import two from './img/1.png';
import fro from './img/2.png';
import ooo from './img/4.png';
import Discuss from '../discuss/index';
import './index.css';
import 'lib-flexible';
export default () => {
  const zan = () => {
    Toast.show({
      icon: 'success',
      content: '赞同',
    });
  };
  const zans = () => {
    Toast.show({
      icon: 'fail',
      content: '不赞同',
    });
  };

  return (
    <div className="all">
      <div>
        <FloatingBall
          className="demo-floating-box-bubble"
          draggable={false}
          adsorb={false}
          offset={{
            right: 20,
            bottom: 100,
          }}
          style={{
            '--rv-floating-box-size': '50px',
          }}
        >
          <Edit
            fontSize={'40px'}
            onClick={() => {
              history.push('/draft');
            }}
          />
        </FloatingBall>
      </div>

      {/* 头部方格 */}
      <div className="top">
        <button
          onClick={() => {
            console.log(1);
          }}
        >
          会员中心<p>买一赠一超值</p>
        </button>
        <button
          onClick={() => {
            history.push('/discover/tu');
          }}
        >
          小剧场<p>组团看经典预告</p>
        </button>
        <button
          onClick={() => {
            history.push('/home');
          }}
        >
          爱艺之城<p>艺术影片社区</p>
        </button>
      </div>
      {/* 观点 */}
      <div className="center">
        <div className="center-guan">
          <div
            style={{
              color: '#FFF',
              backgroundColor: '#656577',
              padding: '0 4px 0',
              borderRadius: '3px 0 0 3px',
            }}
          >
            观点
          </div>
          <div className="two">南方车站的聚会</div>
        </div>
        <h4 style={{ width: '90%', margin: '0 auto', marginTop: '0.3rem' }}>
          《南方这站的聚会》里胡歌和桂纶镁其实彼此有好感
        </h4>
        <div style={{ width: '90%', margin: '0 auto', marginTop: '0.1rem' }}>
          <button
            style={{
              borderRadius: '90px 20px 20px 90px',
              width: '46%',
              backgroundColor: '#fb3777',
              borderStyle: 'none',
              color: '#f9f9f9',
              marginLeft: '0.3rem',
              height: '1.2rem',
            }}
          >
            <p
              onClick={() => {
                zan();
              }}
            >
              赞同
            </p>
            <span style={{ fontSize: '11px', color: '#d4d3d3' }}>
              彼此有情但现实残酷
            </span>
          </button>
          <button
            style={{
              width: '46%',
              borderRadius: '20px 90px 90px 20px',
              backgroundColor: '#3c98da',
              borderStyle: 'none',
              marginLeft: '0.3rem',
              color: '#f9f9f9',
              height: '1.2rem',
            }}
          >
            <p
              onClick={() => {
                zans();
              }}
            >
              不赞同
            </p>
            <span style={{ color: '#d4d3d3' }}>并非男女之情</span>
          </button>
        </div>
        <div
          className="container"
          style={{ display: 'flex', marginTop: '0.4rem', marginLeft: '0.5rem' }}
        >
          <img src={one} alt="" />
          <img src={two} alt="" />
          <img src={fro} alt="" />
          <span>{'1398'}人参与投票</span>
          <p>
            {'19'}条评论 {'>'}
          </p>
        </div>
      </div>
      {/* 聊电影 */}
      <div
        style={{
          backgroundColor: '#FFF',
          marginTop: '0.6rem',
          overflow: 'hidden',
        }}
      >
        <p
          style={{
            fontSize: '0.4rem',
            fontWeight: 'bold',
            marginTop: '0.2rem',
          }}
        >
          一起聊电影
        </p>
        {/* bgm横向滚动 */}
        <div className="gun" style={{ marginTop: '0.2rem' }}>
          <div className="gun-content">
            <div className="img" style={{ width: '20%', borderStyle: 'none' }}>
              <img src={ooo} alt="" />
            </div>
            <div style={{ marginBottom: '0.3rem' }}>
              <div
                className="bgm"
                style={{ width: '100%', borderStyle: 'none' }}
              >
                <p style={{ fontSize: '0.1rem' }}>BGM之魂坂本龙一</p>
                <p
                  style={{
                    backgroundColor: '#3c98da',
                    color: '#fff',
                    width: '0.4rem',
                    height: '0.4rem',
                    textAlign: 'center',
                    fontSize: '0.1rem',
                    marginTop: '0.1rem',
                    lineHeight: '0.4rem',
                  }}
                >
                  荐
                </p>
              </div>
              <div>
                <p style={{ fontSize: '0.1rem', color: '#99a4ae' }}>
                  加入爱奇艺之城,赢彩票
                </p>
              </div>
            </div>
          </div>
          <div className="gun-content">
            <div className="img" style={{ width: '20%', borderStyle: 'none' }}>
              <img src={ooo} alt="" />
            </div>
            <div>
              <div
                className="bgm"
                style={{ width: '100%', borderStyle: 'none' }}
              >
                <p style={{ fontSize: '0.1rem' }}>BGM之魂坂本龙一</p>
                <p
                  style={{
                    backgroundColor: '#3c98da',
                    color: '#fff',
                    width: '0.4rem',
                    height: '0.4rem',
                    textAlign: 'center',
                    fontSize: '0.1rem',
                    marginTop: '0.1rem',
                    lineHeight: '0.4rem',
                  }}
                >
                  荐
                </p>
              </div>
              <div>
                <p style={{ fontSize: '0.1rem', color: '#99a4ae' }}>
                  加入爱奇艺之城,赢彩票
                </p>
              </div>
            </div>
          </div>
          <div className="gun-content">
            <div className="img" style={{ width: '20%', borderStyle: 'none' }}>
              <img src={ooo} alt="" />
            </div>
            <div>
              <div
                className="bgm"
                style={{ width: '100%', borderStyle: 'none' }}
              >
                <p style={{ fontSize: '0.1rem' }}>BGM之魂坂本龙一</p>
                <p
                  style={{
                    backgroundColor: '#3c98da',
                    color: '#fff',
                    width: '0.4rem',
                    height: '0.4rem',
                    textAlign: 'center',
                    fontSize: '0.1rem',
                    marginTop: '0.1rem',
                    lineHeight: '0.4rem',
                  }}
                >
                  荐
                </p>
              </div>
              <div>
                <p style={{ fontSize: '0.1rem', color: '#99a4ae' }}>
                  加入爱奇艺之城,赢彩票
                </p>
              </div>
            </div>
          </div>
        </div>
        <div style={{ marginTop: '0.5rem' }}>
          <Discuss></Discuss>
        </div>
      </div>
    </div>
  );
};
